﻿
@{
    ViewBag.Title = "Employer";
}
@if (!Request.IsAuthenticated || 
    HttpContext.Current.Request.Cookies["_role"] == null || 
    !HttpContext.Current.Request.Cookies["_method"].Value.Contains("Employer"))
{
    Response.Redirect(@Url.Action("Login", "Home"));
}


@section scripts {

<script src="~/Scripts/bootstrap-datepicker.js"></script>

   <script src="~/Scripts/Breezejs/Employer.js"></script>
}
<style>
    .okpayment {
        color: green;
    }
    .notpayment {
        color: red;
    } .mylabel {
        padding-top: 7px;
    }
    .mywell{
        margin-bottom: 5px;
        margin-top:5px;
    }
    tbody tr{
        cursor:pointer;
    }
    .tabs-left > .nav-tabs {
        margin-right: 0;
        padding-right:0;
    }
</style>
<script id="_forw1" type="text/html">
    <li>
    <a href="#b" data-toggle="tab">
        <span class="glyphicon glyphicon-road"></span> Career Expectation
        </a>
    </li>
    <li>
    <a href="#c" data-toggle="tab">
        <span class="glyphicon glyphicon-star"></span> Education
        </a>
    </li>
    <li>
    <a href="#e" data-toggle="tab">
        <span class="glyphicon glyphicon-tasks"></span> Work Experience
        </a></li>
</script>
<script id="_forw2" type="text/html">
    <div class="tab-pane" id="b">
        <div class="mywell">
            <button type="button" class="btn btn-default" onclick="$('#_newcareer').slideToggle()">
                <span class="glyphicon glyphicon-plus"></span> New
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button type="button" class="btn btn-default" data-bind="click: vm.delCareer">
                <span class="glyphicon glyphicon-remove"></span> Remove
            </button>
        </div>
        <div id="_newcareer" class="form-horizontal col-md-12" style="display:none">
            <div class="form-group">
                <label class="col-xs-2 input-sm">Industry *</label>
                <div class="col-xs-4">
                    <select class="form-control validate input-sm" data-bind="options: vm.Industry,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: ceIndustry,
                                           optionsCaption: 'Select...'"></select>
                </div>
                <label class="col-xs-2 input-sm">Function *</label>
                <div class="col-xs-4">
                    <select class="form-control validate input-sm" data-bind="options: vm.ceFunc,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                            value: ceFunction,
                                optionscaption: 'Select...' "></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 input-sm">Level *</label>
                <div class="col-xs-4">
                    <select class="form-control validate input-sm" data-bind="options: vm.JobLevel,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                            value: ceLevel,
                                           optionsCaption: 'Select...'"></select>
                </div>
                <label class="col-xs-2 input-sm">Country *</label>
                <div class="col-xs-4">
                    <select class="form-control validate input-sm" data-bind="options: vm.Location,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                            value:ceCountry,
                                           optionsCaption: 'Select...'"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 input-sm">Job title *</label>
                <div class="col-xs-4">
                    <input id="_jobtitle" class="form-control validate input-sm" onchange="validateCareer()" placeholder="Job title" />
                </div>
                <label class="col-xs-2 input-sm">Job type *</label>
                <div class="col-xs-4">
                    <select class="form-control validate input-sm" data-bind="options: vm.JobType,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                            value: ceJobtype,
                                           optionsCaption: 'Select...'"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 input-sm">Salary range *</label>
                <div class="col-xs-4">
                    <input id="_sf" class="form-control validate input-sm" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="    this.value = addCommas(this.value); validateCareer()" />
                </div>
                <label class="col-xs-2 input-sm">to</label>
                <div class="col-xs-4">
                    <input id="_st" class="form-control validate input-sm" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="    this.value = addCommas(this.value); validateCareer()" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 input-sm">Note</label>
                <div class="col-md-10">
                    <textarea class="form-control input-sm" id="_cenote" rows="4"></textarea>
                </div>

            </div>
            <div class="form-group">
                <div class="col-md-2"><i>* is required</i></div>
                <div class="col-md-10" style="text-align:right">
                    <button type="button" class="btn btn-primary btn-sm" data-bind="click: vm.addCareerExpect">
                        <span class="glyphicon glyphicon-saved"></span> Add
                    </button>
                    <button type="button" class="btn btn-default btn-sm" onclick="$('#_newcareer').slideUp()">
                        <span class="glyphicon glyphicon-remove-circle"></span> Close
                    </button>
                </div>

            </div>
        </div>

        <table class="table table-hover input-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Job Title</th>
                    <th>Function</th>
                    <th>Level</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: vm.Account.PersonalInfor().CareerExpect">
                <tr data-bind="click: vm.onclick">
                    <td><span data-bind="text: $index() + 1"></span></td>
                    <td><span data-bind="text: Title"></span></td>
                    <td><span data-bind="text: Industry().Name"></span></td>
                    <td><span data-bind="text: JobLevel().Name"></span></td>
                </tr>
            </tbody>
        </table>

    </div>
    <div class="tab-pane form-horizontal" id="c">
        <div class="mywell">
            <button type="button" class="btn btn-default" onclick="$('#_newEdu').slideToggle()">
                <span class="glyphicon glyphicon-plus"></span> New
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button type="button" class="btn btn-default" data-bind="click: vm.delEducation">
                <span class="glyphicon glyphicon-remove"></span> Remove
            </button>
        </div>

        <div id="_newEdu" class="col-md-12" style="display:none">

            <div class="form-group">
                <label class="col-xs-3 mylabel input-sm">University/College Name *</label>
                <div class="col-xs-4">
                    <select id="_eUni" class="form-control input-sm validateEdu" onchange="validateEdu()" data-bind="options: vm.University,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           optionsCaption: 'Select...'"></select>
                </div>

            </div>


            <div class="form-group">
                <label class="col-xs-3 mylabel input-sm">Start</label>
                <div class="col-xs-3">
                    <select onchange="validateEdu()" id="_start" class="form-control needyear input-sm validateEdu">
                        <option>Year</option>
                    </select>
                </div>
                <label class="col-xs-3 mylabel input-sm">End</label>
                <div class="col-xs-3">
                    <select onchange="validateEdu()" id="_end" class="input-sm form-control needyear validateEdu">
                        <option>Year</option>
                    </select>
                </div>
            </div>


            <div class="form-group">
                <label class="col-xs-3 mylabel input-sm">Degree *</label>
                <div class="col-xs-3">
                    <select onchange="validateEdu()" id="_eDegree" class="form-control input-sm validateEdu" data-bind="options: vm.Degree,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           optionsCaption: 'Select...'"></select>
                </div>
                <label class="col-xs-3 mylabel input-sm">Kind of Degree *</label>
                <div class="col-xs-3">
                    <select onchange="validateEdu()" id="_eKdegree" class="form-control input-sm validateEdu" data-bind="options: vm.DegreeKind,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           optionsCaption: 'Select...'"></select>
                </div>
            </div>


            <div class="form-group">
                <label class="col-xs-3 mylabel input-sm">Major *</label>
                <div class="col-xs-4">
                    <select onchange="validateEdu()" id="_emajor" class="form-control input-sm validateEdu" data-bind="options: vm.Major,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           optionsCaption: 'Select...'"></select>
                </div>

            </div>

            <div class="form-group">
                <label class="col-xs-3 mylabel input-sm">Note</label>
                <div class="col-xs-9">
                    <textarea id="_enote" class="form-control input-sm" style="min-height:50px"></textarea>
                </div>
            </div>

            <div class="form-group" >
                <div class="col-md-2"><i>* is required</i></div>
                <div class="col-md-10" style="text-align:right">
                    <button type="button" class="btn btn-primary btn-sm" data-bind="click: vm.addEducation">
                        <span class="glyphicon glyphicon-saved"></span> Add
                    </button>
                    <button type="button" class="btn btn-default btn-sm" onclick="$('#_newEdu').slideUp()">
                        <span class="glyphicon glyphicon-remove-circle"></span> Close
                    </button>
                </div>

                
            </div>
        </div>
        <table class="table table-hover input-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>School/Program</th>
                    <th>Graduation</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Educationlist">
                <tr data-bind="click: vm.eduOnclick">
                    <td><span data-bind="text: $index() + 1"></span></td>
                    <td><span data-bind="text: University().Name"></span></td>
                    <td><span data-bind="text: EndDate"></span></td>
                </tr>
            </tbody>
        </table>

    </div>
    <div class="tab-pane" id="e">
        <div class="mywell">
            <button type="button" class="btn btn-default" onclick="$('#_newwe').slideToggle()">New</button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button type="button" class="btn btn-default" data-bind="click: vm.delWE">
                <span class="glyphicon glyphicon-remove"></span> Remove
            </button>
        </div>

        <div id="_newwe" class="form-horizontal" style="display:none">
                <div class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Company Name</label>
                    <div class="col-xs-4">
                        <input id="_wecn" class="form-control validateWE input-sm" onchange="validateWE()" />
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Start</label>
                    <div class="col-xs-3">
                        <select id="_wstart" class="form-control input-sm needyear">
                            <option>Year</option>
                        </select>
                    </div>
                    <label class="col-xs-3 mylabel input-sm">End</label>
                    <div class="col-xs-3">
                        <select id="_wend" class="form-control input-sm needyear">
                            <option>Year</option>
                        </select>
                    </div>
                </div>

            <div class="form-group">
                <label class="col-xs-3 input-sm">Industry</label>
                <div class="col-xs-3">
                    <select class="form-control input-sm validateWE" onchange="validateWE()" data-bind="options: vm.Industry,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: weIndustry,
                                           optionsCaption: 'Select...'"></select>
                </div>
                <label class="col-xs-3 input-sm">Function</label>
                <div class="col-xs-3">
                    <select id="_wefunc" class="form-control input-sm validateWE" onchange="validateWE()" data-bind="options: vm.weFunc,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',

                                optionscaption: 'Select...' "></select>
                </div>
            </div>


                <div class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Job Title</label>
                    <div class="col-xs-3">
                        <input id="_wejt" class="input-sm form-control validateWE" onchange="validateWE()" />
                    </div>
                    <label class="col-xs-3 mylabel input-sm">Level</label>
                    <div class="col-xs-3">
                        <select id="_welvl" class="form-control input-sm validateWE" onchange="validateWE()" data-bind="options: vm.JobLevel,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           optionsCaption: 'Select...'"></select>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Location</label>
                    <div class="col-xs-4">
                        <select id="_weprovince" class="form-control input-sm validateWE" onchange="validateWE()" data-bind="options: vm.weProvince,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',

                                           optionsCaption: 'Select...'"></select>
                    </div>
                </div>

                <div id="_radio" class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Current Job?</label>
                    <div class="col-md-4">
                        <div class="radio">
                            <label>
                                <input type="radio" name="currentjob" value=false checked>
                                No
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="currentjob" value=true>
                                Yes
                            </label>
                        </div>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-xs-3 mylabel input-sm">Responsibilities and Achievements</label>
                    <div class="col-md-9">
                        <textarea id="_wea" class="form-control input-sm" style="min-height: 50px"></textarea>
                    </div>

                </div>


                <div class="form-group">
                    <div class="col-md-12" style="text-align:right">
                        <button type="button" class="btn btn-primary btn-sm" data-bind="click: vm.addWExperiene">
                            <span class="glyphicon glyphicon-saved"></span> Add
                        </button>
                        <button type="button" class="btn btn-default btn-sm" onclick="$('#_newwe').slideUp()">
                            <span class="glyphicon glyphicon-remove-circle"></span> Close
                        </button>
                    </div>

                </div>


        </div>

        <table class="table table-hover input-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Company Name</th>
                    <th>Job Title</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Account.PersonalInfor().WorkExperience">
                <tr data-bind="click: vm.WEOnclick">
                    <td><span data-bind="text: $index() + 1"></span></td>
                    <td><span data-bind="text: CompanyName"></span></td>
                    <td><span data-bind="text: JobTitle"></span></td>
                </tr>
            </tbody>
        </table>

    </div>
</script>


<div id="tmp" class="tabbable tabs-left col-md-12">
    <ul class="nav nav-tabs col-md-2">
        <li class="active">
            <a href="#a" data-toggle="tab">
                <span class="glyphicon glyphicon-user"></span> Personal Infor
            </a>
        </li>
        <!-- ko template: Role() == 'Worker' ? '_forw1' : '' --><!-- /ko -->
        <li>
            <a href="#d" data-toggle="tab">
                <span class="glyphicon glyphicon-list-alt"></span> Jobs
            </a>
        </li>

        <!-- ko if: Role() == 'Employer' -->
        <li>
            <a href="#f" data-toggle="tab">
                <span class="glyphicon glyphicon-stats"></span> Dashboard
            </a>
        </li>
        <!-- /ko -->

    </ul>
    <div class="tab-content col-md-10">
        <div class="tab-pane active" id="a">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title">Account Information</span>
                            <button type="button" class="btn btn-sm btn-default pull-right" data-bind="click: vm.infoSave">
                                <span class="glyphicon glyphicon-ok"></span> Save
                            </button>
                        </div>
                        <div class="panel-body" style="min-height: 100px">
                            <div class="form-horizontal" >
                                <!-- ko template: Role() == 'Employer' ? '_4employer' : '_4employee' --><!-- /ko -->
                            </div>


                        </div>
                    </div>
                </div>
                
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="panel-title">Description</span>
                        <button type="button" class="btn btn-sm btn-default pull-right" data-bind="click:vm.desSave">
                            <span class="glyphicon glyphicon-ok"></span> Save
                        </button>
                    </div>
                    <div class="panel-body" style="padding:0">
                        <textarea placeholder="Descript something about your organization" style="height:300px; border: none" class="form-control input-sm" data-bind="value: Account.PersonalInfor().Description" rows="5"></textarea>
                    </div>
                </div>
            </div>

            <script type="text/html" id="_4employer">
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Company Name</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().Name" type="text" class="form-control input-sm" placeholder="Full Name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="mylabel col-xs-3 input-sm">Address</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().Address" type="text" class="form-control input-sm" placeholder="Address">
                    </div>
                </div>
                <div class="form-group">
                    <label class="mylabel col-xs-3 input-sm">Email</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.Email" type="email" class="form-control input-sm" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Office Phone</label>
                    <div class="col-xs-9">
                        <input data-bind="numeric:Account.PersonalInfor().OfficePhone ,value: Account.PersonalInfor().OfficePhone" type="tel" class="form-control input-sm" placeholder="Office Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="mylabel col-xs-3 input-sm">Cell Phone</label>
                    <div class="col-xs-9">
                        <input data-bind="numeric:Account.PersonalInfor().CellPhone ,value: Account.PersonalInfor().CellPhone" type="tel" class="form-control input-sm" placeholder="Cell Phone">
                    </div>
                </div> 
                <div class="form-group">
                    <label class="mylabel col-xs-3 input-sm">Tax Code</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().TaxCode" type="tel" class="form-control input-sm" placeholder="Tax Code">
                    </div>
                </div>                 
            </script>
            <script type="text/html" id="_4employee">
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Full Name</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().Name" type="text" class="form-control input-sm" placeholder="Full Name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Gender</label>
                    <div class="col-xs-9">
                        <select class="form-control input-sm" data-bind="value: Account.PersonalInfor().Sex">
                            <option value="1">Male</option>
                            <option value="0">Female</option>
                            <option value="-1">Other</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Birthday</label>
                    <div class="col-xs-9">
                        <input data-bind="value: moment(Account.PersonalInfor().Birthday()).format('DD/MM/YYYY') " type="text" class="input-sm form-control datepicker">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">BirthPlace</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().PlaceofBirth" type="text" class="form-control input-sm" placeholder="Place of Birth">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-3 input-sm">Address</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().Address" type="text" class="form-control input-sm" placeholder="Address">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">Nationality</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.PersonalInfor().Nationality" type="text" class="input-sm form-control" placeholder="Nationality">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">Email</label>
                    <div class="col-xs-9">
                        <input data-bind="value: Account.Email" type="email" class="form-control input-sm" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">Home Phone</label>
                    <div class="col-xs-9">
                        <input data-bind="numeric:Account.PersonalInfor().HomePhone  ,value: Account.PersonalInfor().HomePhone" type="tel" class="input-sm form-control" placeholder="Home Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">Office Phone</label>
                    <div class="col-xs-9">
                        <input data-bind="numeric:Account.PersonalInfor().OfficePhone ,value: Account.PersonalInfor().OfficePhone" type="tel" class="form-control input-sm" placeholder="Office Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class=" col-xs-3 input-sm">Cell Phone</label>
                    <div class="col-xs-9">
                        <input data-bind="numeric:Account.PersonalInfor().CellPhone ,value: Account.PersonalInfor().CellPhone" type="tel" class="form-control input-sm" placeholder="Cell Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3 input-sm">Your CV</label>
                    <div class="col-xs-9">
                        <!-- ko template: Account.PersonalInfor().CVName() != 'None' ? '_cvname' : '_noname' --><!-- /ko -->
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3 input-sm">Upload CV</label>
                    <div class="col-xs-9">

                        @using (Html.BeginForm("Upload", "Employer", FormMethod.Post, new { encType = "multipart/form-data" }))
                        {
                            <input style="display:none" type="text" name="personid" data-bind="value:Account.PersonalId()" />
                            <table>
                                <tr>
                                    <td>
                                        <input class="form-control input-sm" type="file" name="FileUpload" accept="application/msword, application/pdf" />
                                    </td>
                                    <td>
                                        <button type="submit" name="Submit" value="Upload" title="Submit">
                                            <span class="glyphicon glyphicon-upload"></span>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        }
                    </div>
                </div>
            </script>


            <script type="text/html" id="_cvname">
                <a href="javascript:void(0)" onclick="_downloadcv()" title="Download CV">
                    <span class="form-control input-sm" data-bind="text: Account.PersonalInfor().CVName "></span>
                </a>
            </script>
            <script type="text/html" id="_noname">

                <span class="form-control input-sm" data-bind="text: Account.PersonalInfor().CVName "></span>

            </script>
        </div>
        <!-- ko template: Role() == 'Worker' ? '_forw2' : '' --><!-- /ko -->
        <!-- ko template: Role() == 'Employer' ? '_dashboard' : '' --><!-- /ko -->
        <div class="tab-pane" id="d">
            <div class="col-md-12">
                <!-- ko template: Role() == 'Employer' ? '_employer' : '' --><!-- /ko -->
                <script id="_employer" type="text/html">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title">Posted jobs</span>
                            <button type="button" class="btn btn-sm btn-default pull-right" data-toggle="modal" data-target="#myModal">
                                <span class="glyphicon glyphicon-plus"></span> New job
                            </button>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped input-sm">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Job Name</th>
                                        <th>Status</th>
                                        <th>Date Posted</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: PostedJobs">
                                    <tr class="treegrid-1">
                                        <td>
                                            <span data-bind="text: $index()+1"></span>
                                        </td>
                                        <td>
                                            <a data-bind="attr: { href: '../Home/JobDetail/?jobcode=' + UniqueId() }"><span data-bind="text: Name"></span></a>
                                        </td>
                                        <td>
                                            <!-- ko template: Status() == 1 ? '_open' : '_close' --><!-- /ko -->
                                        </td>
                                        <td><span data-bind="text: moment(DatePost()).format('DD/MM/YYYY')"></span></td>
                                    </tr>

                                </tbody>
                            </table>
                            <!-- ko if: PostedJobs().length == 0 -->
                            <div align="center">
                                <span><i>You have not posted jobs yet</i></span>
                            </div>

                            <!-- /ko -->

                        </div>
                    </div>
                </script>
                <script id="_open" type="text/html">
                    <span>Open</span>
                </script>
                <script id="_close" type="text/html">
                    <span>Closed</span>
                </script>
                <!-- ko template: Role() == 'Worker' ? '_worker' : '' --><!-- /ko -->
                <script id="_worker" type="text/html">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title">Applied jobs</span>
                        </div>
                        <div class="panel-body">
                            <table class="table input-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Job Name</th>
                                        <th>Status</th>
                                        <th>Applied Date</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: AppliedJobs">
                                    <tr>
                                        <td><span data-bind="text: $index()+1"></span></td>
                                        <td>
                                            <a data-bind="attr: { href: '../Home/JobDetail/?jobcode=' + UniqueId() }"><span data-bind="text: Name"></span></a>
                                        </td>
                                        <td>
                                            <!-- ko template: Name() != 1 ? '_open' : '_close' --><!-- /ko -->
                                        </td>
                                        <td><span data-bind="text: moment(ApplyDate).format('DD/MM/YYYY')"></span></td>
                                    </tr>

                                </tbody>
                            </table>

                            <!-- ko if: AppliedJobs().length == 0 -->
                            <div align="center">
                                <span><i>You have not applied jobs yet</i></span>
                            </div>

                            <!-- /ko -->
                        </div>
                    </div>
                </script>

            </div>
        </div>
        <script id="_dashboard" type="text/html">
            <div class="tab-pane" id="f">
                <div class="col-md-12">
                    <p><span style="font-size:24px;font-weight:800 ;line-height:1.1">IDTE</span> - <span>Tax Code: 64121315223</span></p>

                    <p>Posted jobs: 45 job (s)</p>
                    <p>Employee view: 89 person (s)</p>
                    <p>Dept: 50000 VND</p>

                    <select class="form-control">
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                    </select>
                    <table class="table table-striped input-sm">
                        <tr>
                            <th>Month</th>
                            <th>Views</th>
                            <th>Fee</th>
                            <th>Payment</th>
                        </tr>
                        <tr>
                            <td>January</td>
                            <td>22</td>
                            <td>25000</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        </tr>
                        <tr>
                            <td>February</td>
                            <td>40</td>
                            <td>50000</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        </tr>
                        <tr>
                            <td>March</td>
                            <td>49</td>
                            <td>70500</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        </tr>
                        <tr>
                            <td>April</td>
                            <td>50</td>
                            <td>100000</td>
                            <td class="notpayment"><span class="glyphicon glyphicon-remove-sign"></span></td>
                        </tr>
                        <tr>
                            <td>May</td>
                            <td>86</td>
                            <td>96000</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        </tr>
                        <tr>
                            <td>June</td>
                            <td>42</td>
                            <td>25000</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        <tr>
                            <td>July</td>
                            <td>42</td>
                            <td>120000</td>
                            <td class="okpayment"><span class="glyphicon glyphicon-ok-sign"></span></td>
                        </tr>

                    </table>

                </div>
            </div>
        </script>
        
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content custom-modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">New Job</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-xs-2">Job Name</label>
                            <div class="col-xs-10">
                                <input id="jobname" class="form-control" type="text" placeholder="Job name" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="control-label col-xs-2">Country</label>
                            <div class="col-xs-2">
                                <select class="form-control" data-bind="options: Location,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: LocationSelected,
                                           optionsCaption: 'Location...'"></select>
                            </div>
                            <!-- ko template: typeof vm.LocationSelected() != 'undefined' && vm.LocationSelected() != '' ? '_province' : '' --><!-- /ko -->
                            <script id="_province" type="text/html">
                                <label for="inputEmail" class="control-label col-xs-2">Province</label>
                                <div class="col-xs-2">
                                    <select class="form-control" data-bind="options: Province,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: ProvinceSelected,
                                           optionsCaption: 'Province...'"></select>
                                </div>
                            </script>

                            <!-- ko template: typeof vm.ProvinceSelected() != 'undefined' && vm.ProvinceSelected() != '' ? '_city' : '' --><!-- /ko -->
                            <script id="_city" type="text/html">
                                <label for="inputEmail" class="control-label col-xs-2">City</label>
                                <div class="col-xs-2">
                                    <select class="form-control" data-bind="options: City,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: CitySelected,
                                           optionsCaption: 'City...'"></select>
                                </div>
                            </script>

                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-2">Salary</label>
                            <div class="col-xs-4">
                                <input id="salary1" class=" form-control" type="text" placeholder="Minimum" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)" />                              
                                <input id="_competitive" type="checkbox"> Competitive
                            </div>
                            <div class="col-xs-4">
                                <input id="salary2" class=" form-control" type="text" placeholder="Maximum" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)" />
                            </div>
                            <div class="col-xs-2">
                                <select id="salary3" class="form-control" data-bind="options: Currency,
                                           optionsText: function(item) {
                       return item.Name() + ' ' + item.Currencysigns();
                   },
                                           optionsValue: 'UniqueId',
                                           value: selectCurrency,
                                           optionsCaption: 'Currency'"></select>
                            </div>
                            

                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-2">Industry</label>
                            <div class="col-xs-10">
                                <select class="form-control" data-bind="options: Industry,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: IndustrySelected,
                                           optionsCaption: 'Select Industry...'"></select>
                            </div>
                        </div>
                        <!-- ko template: typeof vm.IndustrySelected() != 'undefined' ? '_function' : '' --><!-- /ko -->
                        <script id="_function" type="text/html">
                            <div class="form-group">
                                <label for="inputEmail" class="control-label col-xs-2">Function</label>
                                <div class="col-xs-10">
                                    <select class="form-control" data-bind="options: Function,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: FunctionSelected,
                                           optionsCaption: 'Select Function...'"></select>
                                </div>
                            </div>
                        </script>



                        <div class="form-group">
                            <label for="inputEmail" class="control-label col-xs-2">Job Description</label>
                            <div class="col-xs-10">
                                <textarea id="_textareJD" class="form-control" style="width: 100%" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="control-label col-xs-2">Requirement</label>
                            <div class="col-xs-10">
                                <textarea id="_textareR" class="form-control" style="width: 100%" rows="5"></textarea>
                            </div>
                        </div>
                    </form>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-bind="click: vm.Save">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

 


